<template>
	<view>
		<view class="search">
			<uni-easyinput prefixIcon="search" v-model="searchValue" placeholder="搜索" @clear="showres = false" />
			<text @click="search()">搜索</text>
		</view>
		<view v-if="showhis && showres === false">
			<p class="delhis">
				<text>历史搜索</text>
				<view>
					<uni-icons v-show="!showdel" type="trash-filled" size="20" color="#e16693"
						@click="showdel = true" />
					<text v-show="showdel" @click="showdel = false">取消</text>
				</view>
			</p>
			<view class="history">
				<view v-for="(item,index) in searchhistory" :key="index">
					<text>{{ item }}</text>
					<uni-icons v-if="showdel" type="close" size="20" color="#999" @click="delhis(index)" />
				</view>
			</view>
			<p class="delhis">猜你想搜</p>
			<view class="history">
				<view v-for="(item,index) in youwant" :key="index">
					<text>{{ item }}</text>
				</view>
			</view>
		</view>
		<view v-else-if="searchAll.length !== 0 && showres === false">
			<view v-for="(item,index) in searchAll" :key="index" class="Searchretuleitem" @click="search(item)">
				<view class="Searchretuleobj">
					<uni-icons type="search" size="20" />
					<rich-text :nodes="showSearchretule(item)"></rich-text>
				</view>
				<text>共23个结果</text>
			</view>
		</view>
		<view v-else-if="showres">
			<view class="filter">
				<text>时间</text>
				<text>价格</text>
				<text>浏览</text>
				<text>兴趣</text>
			</view>
			<view class="items" v-for="i in 8" :key="i">
				<image src="../../static/item/gagerg.jpg" class="imgs" />
				<view class="texts">
					<text class="text">外出无法照顾，过年回老家带不走...</text>
					<view style="display: flex;justify-content: space-between;">
						<text style="color: red;">￥888</text>
						<text>40人喜欢</text>
					</view>
					<image src="../../static/item/9e19ad4e47d02d5bed982db8adf939a.jpeg" class="img2s" />
					<text>爱笑的女孩</text>
				</view>
			</view>
		</view>
		<view v-else>
			<view style="padding: 5px 10px;">
				查找“<text style="color: red;">{{ searchValue }}</text>”
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	// 引用
	import { computed, reactive, ref } from "vue";
	// 搜索框值
	let searchValue = ref('电')

	// 删除按钮
	let showdel = ref(false)

	// 搜索参考值
	let searchall = reactive(["电风扇", "小电风扇", "电风扇遥控", "风扇台", "便携式风扇", "便携式", "便携式shouj"])

	// 猜你想搜值
	let youwant = reactive(["热水壶", "钓鱼竿", "电风扇", "座椅", "绿植", "盆栽", "摩托"])

	// 历史搜索值
	let searchhistory = reactive(["a", "b", "c", "d", "e", "f", "g", "h", "i", "是多少", "k", "l", "m", "n", "o", "p", "m", "n", "o", "p",])

	// 判断展示ui
	const showhis = computed(() => searchValue.value === "")
	const searchAll = computed(() => searchall.filter(item => item.includes(searchValue.value)))

	// 删除
	let delhis = (e : number) => searchhistory.splice(e, 1)

	// 展示搜索结果
	let showres = ref(false)
	// 搜索
	const search = (item = "") => {
		if (searchValue.value) {
			searchhistory.unshift(searchValue.value)
			showres.value = true
			if (item != "") {
				searchValue.value = item
			}
		} else {
			uni.showToast({
				title: "不能为空",
				icon: 'none'
			})
		}
	}

	// 展示内容变红
	const showSearchretule = (parentStr : string) => {
		let res = new RegExp("(" + searchValue.value + ")", 'g');
		parentStr = parentStr.replace(res, "<font style='color:red;'>" + searchValue.value + "</font>");
		return parentStr;
	}
</script>

<style lang="less" scoped>
	.search {
		display: flex;
		align-items: center;
		padding: 5px 10px;
	}

	span {
		width: 50px;
		text-align: center;
	}

	p {
		margin: 5px;
		font-weight: bold;
		line-height: 30px;
	}

	.delhis {
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
		font-weight: bold;
	}

	.history {
		text {
			vertical-align: middle;
			margin: 0 1px;
		}

		view {
			display: inline-block;
			text-align: center;
			margin: 10px;
			padding: 5px 10px;
			border: 1px solid #eee;
			border-radius: 5px;
		}
	}

	.Searchretuleitem {
		line-height: 30px;
		padding: 5px 10px;
		border-bottom: 1px solid #eee;
		margin: 10px 0;
		display: flex;
		justify-content: space-between;

		.Searchretuleobj {
			display: flex;
		}
	}


	.text {
		font-weight: 600;
	}

	.filter {
		display: flex;
		justify-content: space-between;
		padding: 5px 21px;
	}

	.img2s {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-top: 39%;
		margin-left: 3%;
	}

	.items {
		/* width: 100vw; */
		display: flex;
		margin: 8px 0 0 0;
		padding: 0 8px 0 8px;
	}

	.imgs {
		width: 53vw;
		height: 42vw;
		border-radius: 8px;
	}
</style>